Chapter 5 – Web Designing Using Multimedia

🌐 Website Fundamentals

Before designing a website, understand its purpose, users, and content structure.

What is a Website?

A website is a collection of related web pages accessible through the Internet. When designing a website, key factors must be considered: the purpose, the user, and how to maintain it.

Types of Web Applications

There are eight main categories of web applications:

📢

Information Communication

Websites designed to share educational, health, and general information with users.

www.nie.lk · www.surgery.lk · www.webopedia.org

🛒

e-Commerce

Websites that sell goods and services through the Internet.

www.amazon.com · www.farlin.lk · www.lego.lk

🎬

Entertainment

Websites providing songs, films, games, broadcasts, and telecasts for download or streaming.

www.netflix.com · www.youtube.com · www.islandcricket.lk

📣

Advertising

Websites that provide promotional information about goods and services of various organizations.

www.onclickads.net · www.adcash.com

📰

News

Websites that publish current news using multimedia elements.

www.bbc.co.uk · www.itnnews.lk · www.rupavahini.lk

👥

Social Media

Websites providing facilities to develop social networking among groups based on background, occupation, or interests.

www.facebook.com · www.linkedin.com · www.twitter.com

🔍

Search Engine

Websites that help users find information from the World Wide Web using keywords or phrases.

www.google.com · www.bing.com · www.msn.com

👤

Personal

Websites used by individuals — such as writers and politicians — to disseminate personal information.

www.president.gov.lk · www.arthurcclarke.net · www.nelsonmandela.org

Web User Groups

People who access and use a website are called its users. Understanding users is critical when designing a website. Five key factors help understand users:

🌍

Language & Culture

Users may speak different languages (e.g., Sinhala, Tamil, English). Cultural context affects design choices.

👶

Age

Children, teenagers, and adults have different needs, reading levels, and interaction preferences.

🎓

Educational Level

Determines the complexity of language, technical terms, and content depth suitable for the audience.

⚧

Gender

Preferences for color schemes, topics, and presentation styles may vary by gender.

❤️

Preferences

Users have individual tastes for design, navigation style, font size, and multimedia types.

How to understand users: (1) Conduct a study on the target users — surveys, interviews. (2) Analyze similar existing websites to see what works.

Web Content

All audio-visual information and services a user encounters on a website is called web content. Content must be chosen based on the user group analysis.

📝

Texts

Short, clear information presented in readable form.

🖼️

Images

Photos, clip arts, drawings, scanned images.

🔊

Sound

Songs, voice clips, audio recordings.

🎥

Video

Video clips and multimedia presentations.

✨

Animations

Moving graphics to illustrate concepts.

©️

Copyright Info

Ownership details and last-updated dates.

🔗

Hyperlinks

Links to other documents, images, social networks.

🔎

Search

Facilities to search within the website.

Content Management

Systematic organization of web content is called content management. A well-organized website has these features:

Easy to use — users find navigation intuitive
Information is quick to find
Visually attractive to users
Easy to update by the maintainer
Has room to add new features later

Methods of Content Organization

🗺️

1. Site Map

A visual diagram showing all web pages and the hyperlinks (connections) between them. Boxes = web pages; Lines = hyperlinks.

📋

2. Home Page Summary

Use a main menu and sub-menus on the home page to give a summary of all content. Hyperlinks direct users to relevant pages.

📑

3. Brief Information

Limit content on a single page. Overwhelming a page with text causes users to lose interest and miss important content.

📌

4. Lists & Indentation

Use numbered lists, bulleted lists, and indentation to break up long paragraphs and prevent user fatigue.

🧭

5. Easy Navigation

Provide hyperlinks across all pages so users can jump between sections without getting lost.

🔄

6. Regular Updates

Include copyright notice and the last-updated date on each page. Update content regularly to maintain accuracy.

School Website Site Map Example

🏠 Home Page

Current Info

Management

History

Sports

Old Pupils

Societies

SDC

Contact

Volleyball

Cricket

Elle

Literature

Buddhist

English

Boxes = web pages · Lines = hyperlinks · Purple nodes = sub-pages

Structure & Layout

Structure and layout involve features like backgrounds, tables, frames, font types, font sizes, and font shapes. Key principles:

🎨

Identity Consistency

Keep backgrounds, font types, sizes, and colors uniform across all pages of a website.

⭐

Highlight Important Info

Use larger fonts, bold text, or different colors to draw attention to key content.

📱

Responsive Design

The website should automatically adjust its size to fit different screen sizes — desktops, tablets, and mobiles.

Selecting Media Resources

When selecting media (images, sounds, videos, animations), file size is critical — larger files take longer to load and may cause users to leave the site.

🖼️ Graphics

Crop/Trim to remove unnecessary pixels
Use graphic compression (JPG, PNG, WebP)
Use .gif for simple animations

🎥 Video Files

Reduce frame size
Reduce resolution (e.g., 720p instead of 4K)
Adjust frame rate
Remove unnecessary frames and sound

🔊 Audio Files

Reduce the bit rate
Reduce the sample rate
Reduce number of channels (stereo → mono)
Remove unnecessary silence/noise

⚠️ Copyright! If you use media created by someone else, you must obtain permission from the owner. Unauthorized use is unethical and may lead to legal issues. However, under fair use principles, media can be used without permission for news reporting, academic purposes, and criticism.

📄 HTML Basics

HyperText Markup Language — the language of the World Wide Web.

HTML stands for HyperText Markup Language. It is the language used to create documents on the World Wide Web. An HTML document displayed through a web browser is called a web page. HTML is NOT a programming language — it is a markup language that tells the browser how to display content.

Basic HTML Document Structure

📄 myfirst.html — Basic Structure

<html>                      ← Opening html tag — starts the document
  <head>                    ← Head section
    <title> This is the title </title>   ← Shown in browser tab
  </head>                   ← End of head section
  <body>                    ← Body section — visible content goes here
    My first web page          ← This text appears in the browser
  </body>                   ← End of body section
</html>                     ← Closing html tag — ends the document
  

🧠 HEAD Section

Contains metadata and the <title> tag. The title text appears in the browser's tab bar — not on the visible page itself.

👁️ BODY Section

Contains all visible content: text, images, tables, hyperlinks, lists, etc. Everything the user sees on the page goes here.

Features of HTML

i) Tags give display instructions

HTML tags tell the browser how to display content. Commands in an HTML document are called HTML codes.

ii) Angular brackets < >

Every HTML tag is enclosed in angle brackets. Example:  marks the beginning of a paragraph.

iii) Opening and closing tag pairs

Most tags come in pairs. The closing tag adds a forward slash:  opens a paragraph,  closes it.

iv) Case insensitive

HTML tags are NOT case sensitive. <TITLE>, <Title>, and <title> all mean the same thing.

v) No error messages

If a tag is written incorrectly, the browser silently ignores it — there are no error messages like in programming languages.

vi) Element · Attribute · Value

An HTML tag has three components:

<font face="Arial" color="blue"> I am a student </font>
        ↑ Element   ↑↑ Attributes   ↑↑ Values
      

The <body> Tag Attributes

The <body> tag controls the appearance of the entire page. It accepts these important attributes:

Attribute	Description	Example
`bgcolor`	Sets the background color of the entire page (color name or hex).	`bgcolor="yellow"`
`text`	Sets the default text color for all text on the page.	`text="navy"`
`link`	Sets the color of unvisited hyperlinks on the page.	`link="blue"`
`alink`	Sets the color of an active (currently being clicked) hyperlink.	`alink="red"`
`vlink`	Sets the color of visited (already clicked) hyperlinks.	`vlink="purple"`
`background`	Sets an image as the page background (tiled automatically).	`background="bg.jpg"`

<body bgcolor="yellow"
       text="navy"
       link="blue"
       alink="red"
       vlink="purple"
       background="bg.jpg">
  ... page content here ...
</body>
  

Note: These attributes style the entire page at once. Any tag-level color or font settings will override these page-wide defaults.

Creating Your First HTML Page — Step by Step

Open Notepad

Start → All Programs → Accessories → Notepad. Notepad is a simple text editor built into Windows.

Write the HTML code

Type the HTML structure: <html>, <head>, <title>, <body> and your content.

Save as .html

File → Save As. Type the filename as myfirst.html, change "Save as type" to All Files (*.*), and save.

Open in a browser

Double-click the saved .html file. It will open in your default web browser and display your first web page!

Use an HTML Editor

Instead of Notepad, use dedicated HTML editors for easier coding: CoffeeCup (www.coffeecup.com), Seamonkey Composer, or Eclipse.

HTML Colour System

Colors in HTML can be specified in two ways:

Method 1 — Color Names (16 Standard)

black

gray

silver

white

yellow

lime

aqua

fuchsia

red

green

blue

purple

maroon

olive

navy

teal

<font color="fuchsia">SRI LANKA</font>
      

Method 2 — RGB Hexadecimal Codes

Format: #RRGGBB — two hex digits each for Red, Green, Blue (0-F)

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

<font color="#0000FF">SRI LANKA</font>
      

🏷️ HTML Tags Reference

Complete guide to all essential HTML tags with examples and outputs.

Text Formatting Tags

Tag	Description	Example Code	Output
`<h1>...<h6>`	Heading tags — h1 is biggest & boldest, h6 is smallest	`<h1>SRI LANKA</h1>`	SRI LANKA
`<b>`	Bold text	`<b>SRI LANKA</b>`	SRI LANKA
`<i>`	Italic text	`<i>SRI LANKA</i>`	SRI LANKA
`<u>`	Underlined text	`<u>SRI LANKA</u>`	SRI LANKA
`<em>`	Emphasis — renders text in italic (stronger semantic meaning than <i>)	`<em>SRI LANKA</em>`	SRI LANKA
`<strong>`	Strong importance — renders text bold (stronger semantic meaning than <b>)	`<strong>SRI LANKA</strong>`	SRI LANKA
`<s>`	Strikethrough text	`<s>SRI LANKA</s>`	~~SRI LANKA~~
`<sup>`	Superscript	`SRI<sup>LANKA</sup>`	SRI^LANKA
`<sub>`	Subscript	`SRI<sub>LANKA</sub>`	SRI_LANKA
`<marquee>`	Horizontally scrolling text	`<marquee>SRI LANKA</marquee>`	SRI LANKA
`<center>`	Center-aligns content horizontally	`<center>text</center>`	centered

The Font Tag

The  tag has three main attributes:

Attribute	Description	Example Values
`size`	Font size — values 1 (smallest) to 7 (largest). Default is 3.	`size="5"`
`face`	Font type/family — any font installed on the computer.	`face="Arial"`, `face="Verdana"`
`color`	Text color — use color name or hex code.	`color="blue"`, `color="#FF0000"`

<font size="5" face="Verdana" color="fuchsia">SRI LANKA</font>
  

Paragraph & Line Tags

Paragraph Tag

The paragraph tag inserts a block of text. Default alignment is left.

Alignment	Tag
Left (default)	`<p align="left">`
Center	`<p align="center">`
Right	`<p align="right">`
Justify	`<p align="justify">`

Line Break

A blank/empty tag — it has no closing tag. Used exactly where you want to break the line.

Sinhala<br/>
Tamil<br/>
Muslim<br/>
Burgher<br/>
      

▶ OUTPUT

Sinhala
Tamil
Muslim
Burgher

  is a "non-breaking space" character entity — it adds an extra space between words. Example: word1   word2 produces extra space between them.

The Image Tag <img>

The <img> tag is an empty/blank tag (no closing tag). It links an image to the web page. Recommended image formats for web: .png .jpg / .jpeg .gif

Attribute	Description	Example
`src`	Source — the image file path. Include file extension.	`src="C:\Pictures\photo.jpg"`
`alt`	Alternative text — shown if image cannot load.	`alt="Map of Sri Lanka"`
`width`	Width in pixels or percentage.	`width="200"` or `width="50%"`
`height`	Height in pixels or percentage.	`height="150"`
`border`	Border thickness in pixels. Use "0" for no border.	`border="3"`
`align`	Image alignment: left, right, top, bottom, middle.	`align="middle"`

<img src="C:\Users\Pictures\srilanka.jpg"
     alt="Map of Sri Lanka"
     width="100"
     height="200"
     border="3"
     align="middle">
  

Lists

Three types of lists in HTML:

i) Unordered List <ul>

<ul type="disc">
  <li>Sinhala</li>
  <li>Tamil</li>
  <li>Muslim</li>
  <li>Burgher</li>
</ul>
      

▶ OUTPUT (type options: disc · square · circle)

Sinhala
Tamil
Muslim
Burgher

ii) Ordered List <ol>

<ol type="I">
  <li>Sinhala</li>
  <li>Tamil</li>
  <li>Muslim</li>
  <li>Burgher</li>
</ol>
      

Type values: 1=numbers, A=capitals, a=lowercase, I=Roman caps, i=Roman small

▶ OUTPUT

Sinhala
Tamil
Muslim
Burgher

iii) Description List <dl>

<dl>
  <dt>Science Stream</dt>
    <dd>Biology</dd>
    <dd>Physics</dd>
  <dt>Commerce</dt>
    <dd>Economics</dd>
</dl>
      

▶ OUTPUT

Science Stream: Biology; Physics
Commerce: Economics

Nested Lists: You can place one list inside another! Put an <ol> or <ul> inside an <li> element to create sub-lists.

Hyperlinks — Anchor Tag <a>

The <a> (anchor) tag creates a clickable hyperlink. The href attribute specifies where the link goes.

Link to external website

<a href="http://www.president.gov.lk">
  President
</a>
      

Link to a local file

<a href="President.html">
  President
</a>

<a href="President.jpeg">
  President Photo
</a>
      

Tables

Tables organize information into rows and columns. Key table tags:

Tag	Purpose
`<table>`	Defines the entire table. Use attributes: border, width, height, bgcolor, bordercolor, cellpadding, cellspacing, align, background.
`<caption>`	Title or description for the table — appears above it.
`<tr>`	Table Row — adds a new row. Accepts align, bgcolor, border, bordercolor.
`<th>`	Table Header cell — text appears bold automatically.
`<td>`	Table Data cell — adds data into a row.
`colspan="n"`	Merges n columns horizontally into one cell.
`rowspan="n"`	Merges n rows vertically into one cell.

📄 Table HTML Code

<table border="1" width="300">
  <caption>Land Use</caption>
  <tr>
    <th>USE</th>
    <th>EXTENT(ha)</th>
  </tr>
  <tr>
    <td>Paddy</td>
    <td>500,000</td>
  </tr>
  <tr>
    <td>Tea</td>
    <td>190,000</td>
  </tr>
  <tr>
    <td>Rubber</td>
    <td>163,000</td>
  </tr>
</table>
      

▶ OUTPUT

Land Use
USE	EXTENT (ha)
Paddy	500,000
Tea	190,000
Rubber	163,000

colspan Example

<table border="1">
  <tr>
    <td colspan="2">
      <center>LAND USE</center>
    </td>
  </tr>
  <tr>
    <td>USE</td>
    <td>EXTENT(ha)</td>
  </tr>
</table>
      

▶ OUTPUT — merged header cell

LAND USE
USE	EXTENT(ha)
Tea	190,000
Rubber	163,000

⚡ Live HTML Editor

Write HTML code on the left and see the output instantly on the right. Click a preset to load an example!

Code Editor

Live Preview

💡 Tip: The preview updates automatically as you type! Try changing colors, tags, or content to see the effect immediately.

🧪 Challenges — Try These in the Editor!

Challenge 1

Create a heading with your school name

Add a paragraph about your school

Change the heading color to green

Make the school name bold

Challenge 2

Create an unordered list of 5 subjects

Create an ordered list of 3 school rules

Try different list types (disc, circle, 1, A, i)

Nest one list inside another

Challenge 3

Create a 3×3 table of your timetable

Add a caption "My Timetable"

Use bgcolor to color the header row

Add colspan to merge the title cell

🛠️ Web Designing Software

Beyond basic HTML coding — tools that make web design faster and more professional.

WYSIWYG = What You See Is What You Get. These tools show you exactly how the web page will look as you design it — just like word processors!

Web Authoring Tools

These tools automatically generate the HTML code in a separate interface while you design the page visually. If you know HTML, you can use both the visual interface AND the HTML code directly.

🆓

Free / Open Source

Download free from the Internet:

• Kompozer
• CKEditor
• BlueGriffon
• CoffeeCup (free version)
• Seamonkey Composer

💰

Paid / Commercial

Must be purchased:

• Adobe Dreamweaver
• Microsoft FrontPage
• Visual Studio

🔧

Kompozer Features

• Insert tables
• Insert pictures
• Attach files / hyperlinks
• Format letters & text
• See HTML code (source view)
• Preview web page
• Publish (upload via FTP)

Static vs Dynamic Websites

Feature	📄 Static Website	⚙️ Dynamic Website
Content changes	Rarely — stays fixed over time	Often — updated automatically
Design language	HTML, CSS	PHP, ASP.net, JSP + database
User-server connection	Not directly connected to server	Directly connected to web server
Who can update	Only the designer (via FTP)	Anyone with access/login
Security	More secure	More security risks
Complexity	Simpler to build	Requires advanced knowledge
Best for	School websites, personal pages, portfolios	Banking, exams, social media, e-commerce
Examples	A school's static information page	Exam results portal, Facebook, Amazon

📄 Static — How it works

Web Server (stores HTML files)

↓ sends file directly

User's Browser (displays page)

⚙️ Dynamic — How it works

User's Browser (sends request)

↓ request

Web Server (processes request)

↕ query / response

Database Server

↓ generated HTML

User's Browser (displays result)

Content Management Systems (CMS)

CMS is software used for dynamic website designing, content management, and publishing. It is the most popular web design tool today.

✅

Advantages of CMS

• Easy and fast to use
• No prior programming knowledge needed
• Ready-made templates available
• Content can be re-published easily

⚠️

Limitations of CMS

• Design creativity limited to templates
• All CMS sites may look similar
• Customization needs HTML/PHP/CSS knowledge
• More security risks than static sites

Popular Open Source CMS Software

🟠

Joomla

Powerful and flexible CMS. Requires Apache, PHP, and MySQL (or use WAMP/XAMPP package).

www.joomla.org

🔵

WordPress

The world's most popular CMS. Easy to use with thousands of themes and plugins available.

www.wordpress.org

💧

Drupal

Highly customizable and secure CMS. Best suited for large, complex websites.

www.drupal.org

To install Joomla, you need: Apache (web server) + PHP (scripting language) + MySQL (database). Instead of installing all three separately, use the all-in-one package WAMP (www.wampserver.com) or XAMPP (www.apachefriends.org).

Roles in Web Design Teams

Building and maintaining a professional website is teamwork. Each member has specific responsibilities:

🎨

Author

Designs the interfaces of the website — the visual layout and user experience.

💻

Editor

Writes the code, checks for errors, and fixes problems in HTML/CSS/scripts.

📤

Publisher

Fulfills all tasks related to publishing (uploading) the website to the web host.

⚙️

Administrator

Maintains the web server and database — keeps the site running and secure.

👤

User

Uses the website — their feedback and experience drive all design improvements.

🚀 Publishing a Website

Requirements, domain names, hosting, and maintaining your site after launch.

Publishing a website involves: designing → hosting → updating → posting. Five requirements must be fulfilled to publish a website online.

🖥️

1. Web Design Software

To build the website: Notepad, HTML editors, web authoring tools, or CMS.

🌍

2. Web Host

A computer server where your website files are stored and made accessible.

📛

3. Domain Name

Your website's unique address on the Internet (e.g., www.yoursite.lk).

📦

4. File Transfer Protocol

Software to upload your website files to the web host server.

🔗

5. Internet Connection

Required for transferring, updating, and making the website accessible.

Web Host

A web host is a computer connected to the Internet 24/7 that stores your website files and serves them to visitors.

🏢

Dedicated Host

For large-scale organizations. They own and operate their own dedicated server exclusively for their website.

🏪

Shared Host

For small organizations. They rent space on a server shared with other websites. Charges: basic fee + annual charge based on storage capacity.

🆓

Free Hosting

Some institutes offer free hosting — but they display their advertisements on your website as a trade-off.

⚠️

Important Note

Consider storage capacity, uptime reliability, support quality, speed, and cost when choosing a web host provider.

Domain Name

A domain name is the unique address of a website on the Internet. ICANN (Internet Corporation for Assigned Names and Numbers) is the organization responsible for assigning and administering domain names worldwide.

Domain Name Registration Services

GoDaddy

www.godaddy.com

BlueHost

www.bluehost.com

NIC.lk (Sri Lanka)

www.nic.lk

Domain Name Structure

. (Root)

.com

.edu

.gov

.mil

.net

.org

.lk

.uk

.fr

.jp

.in

◀ Organizational hierarchy Geographic hierarchy ▶

Rules for Choosing a Good Domain Name

Identify the organization or purpose — helps users find it via search engines (e.g., nie in www.nie.lk identifies the National Institute of Education)
Use the appropriate top-level domain — .com for commercial, .edu for educational, .org for non-profit, .lk for Sri Lanka
Keep it short — easier to remember and type accurately
Avoid numbers and hyphens — they cause confusion when spoken aloud (e.g., myweb2 sounds like mywebtu)

File Transfer Protocol (FTP)

FTP software uploads your website files from your computer to the web host server, following international standards.

📁

FileZilla

Free, open-source FTP client. Available at:

https://filezilla-project.org

📡

SmartFTP

Professional FTP client with secure file transfers. Available at:

https://www.smartftp.com

Most web authoring tools (like Kompozer) and CMS platforms include built-in file transfer functionality — so a separate FTP tool may not be needed.

Website Maintenance

Regular maintenance is essential for the success of a website. Three key aspects:

Regular Content Updates

Update content daily, weekly, or monthly depending on the website's nature. Change text, images, colours, and layouts. A dedicated "Latest News" column on the home page allows instant updates.

Security Protection

Protect against viruses and unauthorized access. Take regular backups. Follow proper security protocols. Dynamic websites need extra security care.

Software Updates

Keep the web design software, CMS, plugins, and server software up to date. New versions often include important security patches.

Complete Web Development Cycle

💡1. Concept

→

🎨2. Design

→

📛3. Domain

→

🌍4. Hosting

→

📤5. Upload

→

🧪6. Test

→

🔄7. Update

Step 7 loops back to Step 1 — websites are continuously improved!

Internet Service Providers in Sri Lanka

📞

Sri Lanka Telecom

SLT — national provider

📡

Lanka Bell

Fixed wireless broadband

📱

Mobitel

Mobile internet services

📶

Dialog Axiata

Mobile & fiber broadband

✏️ Practice Activities

Hands-on exercises to master web design concepts and HTML coding.

🌐 Activity 1 — Your First HTML Page

Open Notepad and create a complete HTML page with:

A title in the <head> section: "My First Page"

A heading (h1) with your name

A paragraph about your school

Save as myfirst.html (All Files type)

Open in your browser and verify it displays correctly

🎨 Activity 2 — Text Formatting Showcase

Create a web page showing your school name in 7 different header sizes (h1–h6 + small) with different colors:

Use the iskoola pota font face attribute

Apply different colors: Green, Lime, Olive, Navy, Blue, Aqua, Teal

Save with Unicode encoding for Sinhala support

Experiment with , , , , <s>, ,

🇱🇰 Activity 3 — Sri Lanka Web Page

Build a complete web page about Sri Lanka with ALL of these elements:

Title text "SRI LANKA" — centered, blue, Arial font, h2 size

An image of Sri Lanka's map (use the <img> tag with src, alt, width, height)

A paragraph about Sri Lanka using the tag

A list of 4 ethnic groups using tags

A hyperlink on the word "President" linking to www.president.gov.lk

A table of land use data: Paddy (500,000ha), Tea (190,000ha), Rubber (163,000ha)

📋 Activity 4 — Nested Lists

Create a web page with nested lists combining different types:

An outer unordered list (disc) with 4 items

Inside the "Tamil" item, add an ordered list with "Sri Lankan Tamil" and "Indian Tamil"

Try all 5 <ol> type values: 1, A, a, I, i

Create a description list for school subjects (Science and Commerce streams)

📊 Activity 5 — Advanced Tables

Design this specific table using colspan and rowspan:

Create a table with a merged top cell spanning 3 columns labeled "Column 1, Column 2, Column 3"

Row 1 Cell 1 spans 2 rows (rowspan=2)

Complete the table as shown in the textbook (Figure in section 5.1.10)

Add color: bgcolor="yellow", bordercolor="green"

Set cellpadding="5" and cellspacing="5"

🔗 Activity 6 — Hyperlinks

Create a two-page website:

Page 1 (index.html): School name as heading, brief description, a link saying "About Us"

Page 2 (about.html): More detail about the school

Link Page 1 to Page 2 using <a href="about.html">

Link Page 2 back to Page 1 using <a href="index.html">Home</a>

Add an external link to your school's official website if it exists

🗺️ Activity 7 — Plan a School Website

As a group, plan a school website by covering all concepts from sections 5.1.1 to 5.1.6:

Identify the website type (what category does it fall under?)

Define the user group — language, age, education level, gender, preferences

List all web content needed: texts, images, sounds, videos, links

Organize the content — draw a site map with at least 8 pages

Define the structure — colors, fonts, layout scheme

Select media resources — what images/sounds will you use and how will you compress them?

🔬 Activity 8 — Website Analysis

Visit these websites and analyze their strengths and weaknesses in design:

www.srilanka.lk — What languages are supported? What features does it have?

www.schoolnet.lk — Is it well organized? What improvements would you suggest?

www.doenets.lk — Who is the target user? Is the design appropriate for them?

www.bbc.co.uk/education — Compare with local sites. What can we learn?

🎨 Activity 9 — Body Tag Styling

Create a web page that uses ALL six body tag attributes:

Set bgcolor to "lightyellow"

Set text to "navy" to change default text color

Set link to "blue", alink to "red", vlink to "purple"

Add two hyperlinks and observe how link/vlink colors change after clicking

Try using the background attribute with an image file

Combine with font tags — notice body text color is overridden by

🧩 Problems to Solve

Problem 1 — Debug This Code

Find the errors in this HTML code:

        <html>

        <body>

        <h1 color="red">Title</h1>

        <img src="pic.jpg" width="100"></img>

        <p>Hello World

        <a href=www.google.com>Google<a>

        </html>

Hint: There are 6 errors. Can you find them all?

Problem 1 — Answer

Errors identified:

✓ Missing <head> section
✓ <h1> color should use
✓ <img> is an empty tag — no </img> needed
✓ href value needs quotes: href="www.google.com"
✓ Closing anchor tag should be </a> not <a>
✓ Missing </body> tag

Problem 2 — Classify Websites

Classify each website into its correct type:

1. www.youtube.com → Entertainment
2. www.google.com → Search Engine
3. www.amazon.com → e-Commerce
4. www.facebook.com → Social Media
5. www.bbc.co.uk → News
6. www.nie.lk → Information

Problem 3 — Domain Name Analysis

What does each part of this URL mean?

        www.president.gov.lk
      

• www = World Wide Web prefix
• president = domain name (organization)
• .gov = government organization
• .lk = Sri Lanka (country code)

🎯 Chapter 5 Quiz

Test your knowledge! Select the best answer for each question, then check your score.

0/20

Click "Check Answers" to see your score

1. What does HTML stand for?

A Hyper Transfer Markup Language

B HyperText Markup Language

C High Tech Markup Language

D HyperText Management Language

2. Which of the following is a correct way to close the HTML document?

A <html/>

B <end>

C </html>

D <close html>

3. Where should the visible content of a web page be placed?

A Inside the <body> tag

B Inside the <head> tag

C Inside the <title> tag

D Inside the <meta> tag

4. Which tag makes text the LARGEST heading?

A <h6>

B <h1>

C <heading>

D <big>

5. The <img> tag is an example of a:

A Paired tag

B Header tag

C Link tag

D Empty/blank tag (no closing tag)

6. Which attribute of the <img> tag specifies the image file path?

A alt

B href

C src

D link

7. Which tag creates an unordered (bulleted) list?

A <ul>

B <ol>

C <dl>

D <list>

8. Which HTML attribute is used to create a hyperlink destination?

A src

B href

C link

D url

9. What does the "colspan" attribute do in a table?

A Merges rows vertically

B Sets column width

C Merges multiple columns into one cell

D Sets column color

10. A website that uses PHP, ASP.net, or JSP and connects to a database is called a:

A Static website

B Personal website

C Search engine

D Dynamic website

11. WYSIWYG stands for:

A Write Your Site In What You Get

B What You See Is What You Get

C Web Your Site In What You Gain

D What Your System Is With Your GUI

12. Which organization is responsible for assigning domain names worldwide?

A ICANN

B UNESCO

C ITU

D W3C

13. What does FTP stand for?

A Fast Transfer Protocol

B File Transfer Program

C File Transfer Protocol

D Full Transfer Protocol

14. Which of the following is an open-source CMS software?

A Adobe Dreamweaver

B Microsoft FrontPage

C Visual Studio

D Joomla

15. What does the tag do in HTML?

A Creates a bold text

B Inserts a line break

C Creates a new paragraph

D Adds a border

16. Which type of list uses <dl>, <dt>, and <dd> tags?

A Description/Definition list

B Ordered list

C Unordered list

D Numbered list

17. The default font size in the HTML tag is:

A 1

B 5

C 3

D 7

18. In a static website, who can change the web content?

A Any user with a browser

B The database administrator

C Any registered user

D Only the designer by connecting to the web server

19. Which of the following is NOT a feature of a well-organized website?

A Easy to use

B Contains as much information as possible on each page

C Easy to update

D Quick to find information

20. Which of the following is recommended when reducing audio file size for a website?

A Reducing the bit rate and sample rate

B Increasing the number of channels

C Converting to a lossless format

D Increasing the resolution

What is a Website?

Types of Web Applications

Information Communication

e-Commerce

Entertainment

Advertising

News

Social Media

Search Engine

Personal

Web User Groups

Language & Culture

Age

Educational Level

Gender

Preferences

Web Content

Texts

Images

Sound

Video

Animations

Copyright Info

Hyperlinks

Search

Content Management

Methods of Content Organization

1. Site Map

2. Home Page Summary

3. Brief Information

4. Lists & Indentation

5. Easy Navigation

6. Regular Updates

School Website Site Map Example

Structure & Layout

Identity Consistency

Highlight Important Info

Responsive Design

Selecting Media Resources

🖼️ Graphics

🎥 Video Files

🔊 Audio Files

Basic HTML Document Structure

🧠 HEAD Section

👁️ BODY Section

Features of HTML

i) Tags give display instructions

ii) Angular brackets < >

iii) Opening and closing tag pairs

iv) Case insensitive

v) No error messages

vi) Element · Attribute · Value

The <body> Tag Attributes

Creating Your First HTML Page — Step by Step

Open Notepad

Write the HTML code

Save as .html

Open in a browser

Use an HTML Editor

HTML Colour System

Method 1 — Color Names (16 Standard)

Method 2 — RGB Hexadecimal Codes

Text Formatting Tags

The Font Tag

Paragraph & Line Tags

Paragraph Tag <p>

Line Break <br/>

The Image Tag <img>

Lists

i) Unordered List <ul>

ii) Ordered List <ol>

iii) Description List <dl>

Hyperlinks — Anchor Tag <a>

Link to external website

Link to a local file

Tables

colspan Example

🧪 Challenges — Try These in the Editor!

Web Authoring Tools

Free / Open Source